<template>
  <div>
    <div class="Sort">
      <div class="Sort__header">
        <div class="Sort__header__bar">
          <AddPurchaseCategoryParent @on-success="reloadTree"/>
          <div class="Sort__search">
            <el-select v-model="searchText"
              filterable remote size="mini" clearable
              placeholder="搜索分类" :remote-method="getShopCategoryDropDown"
              :loading="loading">
              <el-option v-for="item in searchList" :key="item.value" :label="item.text" :value="item.id">
              </el-option>
            </el-select>
            <el-button style="margin-left:30px;" type="primary" size="mini" @click="doSearch">搜索</el-button>
          </div>
        </div>
        <div class="Sort__table__header">
          <span class="Sort__table__header__item">分类名称</span>
          <span class="Sort__table__header__item">分类次序</span>
          <span class="Sort__table__header__item">操作</span>
        </div>
      </div>
      <div ref='scroll' class="Sort__content">
        <el-tree
          auto-expand-parent
          :default-expanded-keys="defaultExpandedKeys"
          ref='treenode'
          :data="sortTree"
          node-key="id"
          :props="{children:'childList'}"
          :filter-node-method="filterNode"
          :expand-on-click-node="false">
          <div class="Sort__tree" slot-scope="{ node, data }">
            <span class="Sort__tree__name">{{ data.name }}</span>
            <span class="Sort__tree__btns">
              <AddPurchaseCategoryChild v-if="data.parentId==0" :parent-id="data.id" @on-success="reloadTree(data.id)" />
              <MergePurchaseCategory v-if="data.parentId!=0" :form-id="data.id" :dropDownOption="dropDownOption" @on-success="reloadTree"/>
              <UpdatePurchaseCategory :form-name='data.name' :form-id="data.id" :form-order-index="data.orderIndex" @on-success="reloadTree(data.id)"/>
              <el-button type="text" @click="deleteShopCategory(data)">删除</el-button>
            </span>
            <span class="Sort__tree__sortid"> {{ data.orderIndex }}</span>
          </div>
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script>
import {getShopCategoryDropDown, getShopCategoryList, deleteShopCategory} from '~/api/'
import AddPurchaseCategoryParent from '~/components/shopSort/addPurchaseCategoryParent.vue'
import AddPurchaseCategoryChild from '~/components/shopSort/addPurchaseCategoryChild.vue'
import UpdatePurchaseCategory from '~/components/shopSort/updatePurchaseCategory.vue'
import MergePurchaseCategory from '~/components/shopSort/mergePurchaseCategory.vue'

  export default {
    components: {
      AddPurchaseCategoryParent,
      AddPurchaseCategoryChild,
      UpdatePurchaseCategory,
      MergePurchaseCategory
    },
    data() {
      return {
        searchList: [],
        dropDownOption: [],
        searchText: "",
        defaultExpandedKeys: [],
        loading: false
      }
    },
    async asyncData({app}) {
      try {
        const res = await getShopCategoryList(app)
        if (res.code == '0') return {sortTree: res.data.tree}
        return {sortTree: [], message: res.message}
      } catch (error) {
        console.error(`获取平台分类列表结构接口错误，错误信息${error}`)
      }
    },
    beforeMount() {
      this.searchOption()
    },
    mounted() {
      this.$refs.scroll.style.height = document.documentElement.clientHeight-101+'px'
    },
    methods: {
      searchOption () {
        console.log(this.sortTree)
        if (this.sortTree.length == 0) return []
        this.sortTree.map(item => {
          if (item.childList&&item.childList.length > 0) {
            let option = {value: item.id, label: item.name}
            option['children'] = []
            item.childList.map(val => option['children'].push({value: val.id, label: val.name}))
            this.dropDownOption.push(option)
          }
        })
      },
      filterNode(value, data) {
        // console.log(value, data)
        if (!value) return true;
        return data.id == value || data.parentId == value;
      },
      async reloadTree (key=0) {
        this.defaultExpandedKeys[0] = key
        const res = await getPurchaseCategoryList(this)
        if (res.code == '0') return this.sortTree = res.data.tree
        console.log(res)
      },
      async getShopCategoryDropDown (query) {
        if (this.loading || query == '') return
        this.loading = true
        const res = await getShopCategoryDropDown(this, query, 2)
        this.searchList = res.data.categoryList
        this.loading = false
      },
      doSearch () {
        this.$refs.treenode.filter(this.searchText)
      },
      deleteShopCategory (item) {
        const delateFun = async () => {
          const res = await deleteShopCategory(this, item.id)
          this.$msgbox({
            title: '提示',
            type: res.code == '0' ? 'success' : 'error',
            message:res.code == '0' ? '操作成功' : res.message,
          })
          this.$refs.treenode.remove(item)
        }
        // 没有子分类，直接删除
        if (!item.childList || item.childList.length == 0) {
          delateFun()
          return
        }
        // 有子分类提示有子分类
        this.$msgbox({
          title: '提示',
          type: 'warning',
          message: '该分类项包含子分类，如果删除子分类将一并删除',
          showCancelButton: true,
          cancelButtonText: '取消',
          confirmButtonText: '确定删除',
          callback: (action) => {
            if (action != 'confirm') return
            delateFun()
          }
        })
        // const
      }
    }
  }
</script>

<style lang="scss" scoped>

.Sort {
  &__search {
    float: right;
    & /deep/ {
      .el-input__inner {
        border-radius: 14px;
        background-color: #f0f5fb;
        text-align: center;
      }
    }
  }
  &__tree {
    width: 100%;
    font-size: 16px;
    color: #000000;
    height: 40px;
    line-height: 40px;
    &__name {
      font-weight: bold;
    }
    &__btns {
      float: right;
      display: block;
      text-align: right;
      width: 376px;
    }
    &__sortid {
      float: right;
      width: 120px;
      text-align: center;
      margin-right: 35px;
    }
  }
  &__content {
    padding: 10px 90px 10px 45px;
    background-color: #f5f9fe;
    width: 100%;
    height: 600px;
    overflow-y: auto;
    & /deep/ {
      .el-tree {
        background-color: #f5f9fe;
      }
      .el-tree-node__content {
        padding-top: 6px;
        padding-bottom: 6px;
        height: 52px;
        line-height: 40px;
      }
      .el-tree-node__expand-icon {
        vertical-align: middle;
      }
      .el-button--text {
        color: #000000;
        font-size: 16px;
        font-weight: bold;
        padding: 11px 16px;
        &:hover {
          color: #409eff;
        }
        &:disabled {
          color: #9c9c9c;
        }
      }
    }
  }
  &__table {
    &__header {
      font-size: 16px;
      padding: 0px 90px 11px 45px;
      text-align: center;
      height: 32px;
      position: sticky;
      top: 0;
      &__item {
        font-weight: bold;
        &:first-child {
          float: left;
          padding-left: 16px;
          position: relative;
          &:before {
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #409eff;
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -3px;
          }
        }
        &:last-child {
          float: right;
        }
      }
    }
  }
  &__header {
    border-bottom: 1px solid #e4e7ed;
    &__bar {
      padding: 24px 90px 24px 47px;
      height: 76px;
    }
  }
}
</style>
